<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <style>
        #pop{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
            background-color: rgba(0,0,0,0.2);
        }
        #wrap{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #data{
            padding: 30px;
            background-color: white;
            width: 600px;
        }

        #btn{
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="main">
    <div id="pop">
        <div id="wrap">
            <div id="data">
                <table class="layui-table">
                    <colgroup><col width="200"><col width="150"><col><col></colgroup>
                    <thead>
                        <tr><th>课程名称</th><th>课程性质</th><th>学分</th><th>成绩</th></tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div id="btn">
                    <button class="layui-btn" id="expScore" onclick="exportScore(this)">导出成绩单</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    stuId = /*[[${session.sysUser.id}]]*/ '';
    /*]]>*/
</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;;

        query();

        function query() {
            $.get('/ssms/es/query?stuId=' + stuId,function (res) {
                if(res.code == 200){
                    $('#pop').css('display','block');
                    var wrap = $('#wrap')
                    var tb =  wrap.find('table')

                    res.data.list.map(function (item) {
                        var tr = '<tr>' +
                            '<td>'+item.course.courseName+'</td>'+
                            '<td>'+item.course.category+'</td>'+
                            '<td>'+item.course.credit+'</td>'+
                            '<td>'+item.score+'</td>'+
                            '</tr>'
                        tb.find('tbody').append(tr)
                    })

                    var tr = '<tr><td>平均绩点</td><td colspan="3" align="center">' + res.data.avgCredit + '</td></tr>'
                    tb.find('tbody').append(tr)
                    wrap.find('#expScore').attr('data-stuid',stuId)
                    $('#pop').append(wrap)
                }
            })
        }

        window.exportScore = function (target) {
            window.location.href = '/ssms/es/export?stuId='+$(target).attr('data-stuid')
        }
    });
</script>
</body>
</html>